<template>
  <div id="app">
    <div id="headr" v-if="$route.meta.headr">
      <Headr />
    </div>
    <keep-alive>
      <router-view :class="$route.meta.headr?'view':''" />
    </keep-alive>
    <div v-show="!($route.meta.show)" id="nav">
      <router-link to="/"><img src="./assets/images/首页.svg" alt="">首页</router-link>
      <router-link to="/publish"><img src="./assets/images/编辑.svg" alt="">发布</router-link>
      <router-link to="/adoption" :class="$route.meta.active?'active':''"><img src="./assets/images/爱心.svg" alt="">领养</router-link>
      <router-link to="/News"><img src="./assets/images/气泡.svg" alt="">消息</router-link>
      <router-link to="/my"><img src="./assets/images/人.svg" alt="">我的</router-link>
    </div>
  </div>
</template>
<script>
import Headr from "./components/MC/Headr/Headr.vue";
export default {
  name: "App",
  components: {
    Headr
  }
};
</script>
<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  .view {
    padding-top: 88px;
  }
}
#headr {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}
#nav {
  padding: 20px 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #dddddd;
}

#nav a {
  width: 20%;
  font-size: 28px;
  font-weight: bold;
  color: #7e8c9c;
}
#nav a img{
  width: 44px;
  height: 46px;
  display: block;
  margin: auto;
}
#nav a.router-link-exact-active {
  color: #fe9e4e;
}
#nav .active{
  color: #fe9e4e;
}
</style>
